<template>
    <el-form
        ref="loginFormRef"
        :model="form"
        :rules="rules"
        label-width="0"
        size="large"
        @keyup.enter="login"
    >
        <el-form-item prop="user">
            <el-input
                v-model="form.user"
                prefix-icon="el-icon-user"
                clearable
                :placeholder="$t('用户名/手机/邮箱')"
            >
                <template #append>
                    <el-select v-model="userType" style="width: 130px" disabled>
                        <el-option :label="$t('管理员')" value="admin"></el-option>
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                v-model="form.password"
                prefix-icon="el-icon-lock"
                clearable
                show-password
                :placeholder="$t('请输入密码')"
            ></el-input>
        </el-form-item>
        <template v-if="form.captchaType == 1">
            <el-form-item prop="captcha">
                <div class="login-captcha">
                    <el-input
                        v-model="form.captcha"
                        prefix-icon="el-icon-lock"
                        clearable
                        show-password
                    ></el-input>
                    <el-image :src="captchaSrc" @click="getCaptcha"></el-image>
                </div>
            </el-form-item>
        </template>
        <!--<el-form-item style="margin-bottom: 10px">-->
        <!--    <el-col :span="12">-->
        <!--        <el-checkbox :label="$t('24小时免登录')" v-model="form.autologin"></el-checkbox>-->
        <!--    </el-col>-->
        <!--    <el-col :span="12" class="login-forgot">-->
        <!--        <router-link to="/resetPassword">{{ $t('忘记密码') }}？</router-link>-->
        <!--    </el-col>-->
        <!--</el-form-item>-->
        <el-form-item>
            <el-button type="primary" style="width: 100%" :loading="isLogin" round @click="login">
                {{ $t('登录') }}
            </el-button>
        </el-form-item>
        <!--<div class="login-reg">-->
        <!--    {{ $t('还没有账号?') }}-->
        <!--    <router-link to="/userRegister">{{ $t('创建新账号') }}</router-link>-->
        <!--</div>-->
    </el-form>

    <click-captcha
        v-if="showClickCaptcha"
        @onLogin="login"
        @closeClickCaptcha="closeClickCaptcha"
    ></click-captcha>
</template>

<script setup lang="ts">
import { type FormInstance, type FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
import passport from '@/api/modules/passport'
import ClickCaptcha from '@/views/login/components/click-captcha.vue'
import { useLogin } from '@/views/login/use-login.ts'

const { t } = useI18n()
const captchaSrc = ref('')
const showClickCaptcha = ref(false)
const userType = ref('admin')

const { isLogin, getToken, getSystemMenu } = useLogin()

interface FormData {
    user: string
    password: string
    autologin: boolean
    captchaType: number
    captcha: string
    captchaId: number
}
const form = reactive<FormData>({
    user: '',
    password: '',
    autologin: false,
    captchaType: 1,
    captcha: '',
    captchaId: 0
})

// 传递数据
const props = defineProps(['sysApiConfig'])

// 表单验证
const rules = reactive<FormRules<FormData>>({
    user: [{ required: true, message: t('账户名必填'), trigger: 'blur' }],
    password: [{ required: true, message: t('密码必填'), trigger: 'blur' }]
})
const loginFormRef = ref<FormInstance>()

onMounted(() => {
    // 点选|常规验证码
    form.captchaType = props.sysApiConfig.sysCaptchaType
    // 常规验证码验证码
    if (form.captchaType == 1) {
        getCaptcha()
    }
})

// 常规验证码
async function getCaptcha() {
    const data = await passport.getCaptcha.get()
    captchaSrc.value = data.captcha
}

// 关闭点击验证码
function closeClickCaptcha() {
    showClickCaptcha.value = false
}

// 刷新验证码
function refreshCaptcha() {
    if (form.captchaType == 1) {
        getCaptcha()
    } else if (form.captchaType == 2) {
        closeClickCaptcha()
    }
}

async function login(params: any) {
    await loginFormRef.value?.validate()

    if (params && params.captchaInfo && params.clickCaptchaInfo) {
        // 提交点击验证码
        form.captchaId = params.clickCaptchaInfo.id
        form.captcha = params.captchaInfo
    } else {
        // 获取点击验证码
        if (form.captchaType == 2) {
            showClickCaptcha.value = true
            return
        }
    }

    // 获取token
    const data = {
        account: form.user,
        password: form.password,
        captcha: form.captcha,
        captchaType: form.captchaType,
        captchaId: form.captchaId,
        loginWay: 1
    }
    const res = await getToken(data)
    if (!res) {
        refreshCaptcha()
        return
    }

    // 获取系统菜单
    await getSystemMenu()
}
</script>

<style></style>
